html, body, ul, #app {
	margin: 0;
	padding: 0;
	font-family: "Open Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei", "Microsoft Jhenghei", sans-serif;;
	background-color: #fafafa;
}
li{
	list-style-type: none;
}
a {
	// text-decoration: none;
	color: #007aff;
}
.app-wrapper {
	header{
		position: -webkit-sticky;
		position: fixed;
		box-sizing: border-box;
		z-index: 999;
		top: 0;
		overflow: hidden;
		width: 100%;
		margin: 0 0 1vh 0;
		padding: 0 1vh;
		border-bottom: 1px solid #f1f1f1;
		background-color: #fafafa;
	}
	.app-mask{
		position: absolute;
		z-index: 9;
		height: 100%;
		width: 100%;
		background-color: rgba(0, 0, 0, 0.2);
		border-radius: 4vh;
	}
	.app-link, .app-social{
		float: left;
		width: 120px;
		ul{
			padding: 0;
			display: flex;
			text-align: center;
			margin-top: 12px;
			margin-bottom: 12px;
			li{
				flex: 1;
				text-align: center;
				list-style-type: none;
				height: 21px;
				a{
					color: #000;
					text-decoration: none;
				}
				&.github{
					background: url(../img/github.svg) no-repeat center;
				}
				&.gmail{
					background: url(../img/gmail.svg) no-repeat center;
				}
				&.juejin{
					background: url(../img/juejin.svg) no-repeat center;
				}
				&.zhihu{
					background: url(../img/zhihu.svg) no-repeat center;
				}
				&.weibo{
					background: url(../img/weibo.svg) no-repeat center;
				}
			}
		}
	}
	.app-social {
		float: right;
		width: 150px;
		ul{
			li{
				a{
					display: inline-block;
					width: 20px;
					height: 20px;
				}
			}
		}
	}
	.app-phone {
		margin: 54px auto 0 auto;
		height: 90vh;
		width: 44vh;
		background: url(../img/iphonex_large.svg) center center no-repeat;
		.phone-wrapper{
			position: relative;
			margin: 0 2vh;
			overflow: hidden;
			height: 87.7vh;
		}
		.app-message {
			margin: 1vh 0 0 0;
			.message-padding{
				height: 8vh;
			}
			.message-content{
				padding: 0 1vh;
				height: 64.5vh;
				overflow: auto;
			}
		}
		.app-input-bar{
			position: relative;
			height: 6.5vh;
			line-height: 6vh;
			margin: 4vh;
			padding: 0 3vh;
			border-radius: 4vh 4vh 4vh 4vh;
			border: #ccc solid 1px;
			color: #999;
			font-size: 14px;
			background-color: #fff;
			.app-input-button{
				position: absolute;
		    right: 2vh;
		    top: 1.1vh;
				display: inline-block;
				background-color: #007aff;
				width: 4vh;
				height: 4vh;
				border-radius: 2vh;
			}
			.input-arrow{
				position: relative;
				top: 0.5vh;
				left: 1vh;
				width: 2vh;
				height: 3vh;
				background: url(../img/arrow.svg) no-repeat center;
			}
		}
		.app-input-pannel{
			position: absolute;
			z-index: 99;
			bottom: 2.5vh;
			border-radius: 0 0 4vh 4vh;
			width: 100%;
			animation: slideInUp 0.4s;
			.app-input-options{
				height: 100%;
				background-color: transparent;
				ul{
					margin: 2vh 4vh 1vh 4vh;
					border-radius: 2vh;
  				li{
						padding: 1vh 0;
						text-align: center;
						color: #333;
						font-size: 14px;
						border-bottom: solid 1px #ccc;
						&:last-child{
							border-bottom: 0;
						}
					}
				}
			}
		}		
	}
	footer{
		color: #333;
    font-size: 14px;
    text-align: center;
    padding: 9px;
	}
}
@-webkit-keyframes slideInUp {
  0% {
		transform: translateY(100%);
  }
  100% {
		transform: translateY(0%);
  }
}